<template>
  <div>
    <!--监听属性-->
    <button @click="counter++">点击++计数器+1</button>
    <button @click="counter--">点击--计数器-1</button>
    <br>

    {{reverse_msg}}

    <!--&lt;!&ndash;绑定样式&ndash;&gt; v-on-bind == ':'-->
    <div :class="{active:isactive}"></div>

    <!--遍历展示-->
    <ul>
      <li v-for="(item, index) in tlist" :class="{on:index%2==0, off:index%2!=0}">
        {{item.text}}
      </li>
      <li v-for="(item, index) in tlist">
        {{index}}
      </li>
    </ul>

    <div v-if="t === 'A'">A</div>
    <div v-else-if="t === 'B'">B</div>
    <div v-else>C</div>

    <h1 v-show="ok" >你看到我了</h1>

    {{msg}}
  </div>
</template>

<script>
    export default {
        name: "test",
      data:function(){
          return{
            msg:'你好,我是VUE',
            ok:false,
            t: 'B',
            tlist: [{text:'汽车', price:10},{text:'电脑', price:100},{text:'手机', price:50}],
            isactive:false,
            counter:0
          }
      },
      // 监听属性
      watch:{
          counter:function (nval,oval) {
            console.log('计数器的变化:'+'从'+oval+'成为'+nval)
          }
      },
      // 计算属性 computed()
      computed:{
          // 反转
          reverse_msg:function () {
            return '$' + this.msg.split('').reverse().join('')
          }
      }
    }
</script>

<style scoped>
  .on{background: #3B91FF}
  .off{background: red}
  .active{
    width:100px;
    height: 200px;
    background: yellow;
  }
</style>
